import {VNode} from "vue";

export interface CommonProps {
    // actions
    actionType: string;
    url: string;
    // size
    height: string;
    width: string;
    paddingLeft: string;
    paddingRight: string;
    paddingTop: string;
    paddingBottom: string;
    // border type
    borderStyle: string;
    borderColor: string;
    borderWidth: string;
    borderRadius: string;
    // shadow and opacity
    boxShadow: string;
    opacity: string;
    // position and x,y
    position: string;
    left: string;
    top: string;
    right: string;
}

export interface ImageProps extends CommonProps {
    src: string;
}

export interface TextProps extends CommonProps {
    text: string;
    fontSize: string;
    fontFamily: string;
    fontWeight: string;
    fontStyle: string;
    textDecoration: string;
    lineHeight: string;
    textAlign: string;
    color: string;
    backgroundColor: string;
    backgroundImage: string;
}

export interface PageProps {
    backgroundColor: string;
    backgroundImage: string;
    backgroundRepeat: string;
    backgroundSize: string;
    height: string;
}

export type AllProps = ImageProps & TextProps & PageProps;

export interface PropToForm {
    component: string;
    subComponent?: string;
    extraProps?: { [key: string]: any };
    text?: string;
    options?: { text: string | VNode; value: any }[];
    initTransform?: (v: any) => any;
    afterTransform?: (v: any) => any;
    valueProp?: string;
    eventName?: string;
}

export type PropsToForms = {
    [P in keyof AllProps]?: PropToForm
}